	<div class="panel panel-default">
		<div class="panel-heading">
			<input type="hidden" value="" id="menuId" />
			<i class="icon-sitemap"></i>
			菜单管理
		</div>
		<div class="panel-body">
			<div class="row">												
				<div class="col-md-12 col-sm-12">
					<div class="btn btn-info" id="create">
						<i class="icon-plus"></i> 新建
					</div>					
					<div class="btn btn-info hidden" id="edit">
						<i class="icon-edit "></i> 修改
					</div>
					<div class="btn btn-danger hidden" id="remove">
						<i class="icon-remove"></i> 删除
					</div>				  
				</div>
			</div>
			<div class="row">&nbsp;</div>			
			<div class="row">					
				<div class="list-group col-md-12 col-sm-12">
					<div class="menu-tree" style="margin-left: 15px; border-top: 1px solid #ddd; max-height:600px; overflow:auto;"  >加载中......</div>
				</div>						
			</div>
		</div>

		<div class="panel-footer"></div>
	</div>

<script type="text/javascript">
	require(['suredyTree','suredyModal'],function(Tree, Modal) {
		var loadTree = function() {
			Tree('.menu-tree', 'menu/tree', {
				autoCollapse : false,
				inContainer : false,
				style : 'file',
				size : 'sm'
			});
			
			// 取消active状态
			$.each(Tree.checked('.menu-tree'),function(i,v) {
				$(v).trigger('click');
			});
			
			$('.menu-tree .suredy-tree li>span+ul').collapse('show');
			
			$('.menu-tree .tree-node').on('suredy.tree.node.click', function() {
				if (Tree.isActive(this)){
					var nodeData = Tree.data(this);
					
					$('#menuId').val(nodeData.id);
					$('#edit').removeClass('hidden');
					$('#remove').removeClass('hidden');
				} else {
					$('#menuId').val('');
					$('#edit').addClass('hidden');
					$('#remove').addClass('hidden');
				}
			});
		};
		loadTree();	
		
		$('#create').on('click', function() {
			var checked = Tree.checked('.menu-tree');
			var parentId = '';
			
			if (checked.length === 1) {
				parentId = Tree.data(Tree.checked('.menu-tree')[0], 'id');
			}
			
			Modal.showModal({
				size : 'lg',
				icon : 'icon-plus',
				title : '创建菜单',
				showFoot : false,
				uri : 'menu/edit?parentId=' + parentId
			});
		});

		// edit menu btn click
		$('#edit').on('click', function() {	
			var menuId = $('#menuId').val();
			if (menuId == '') {
				alert('[警告] 未选择菜单节点，或者菜单节点不可编辑！');
				return;
			}
			Modal.showModal({
				size : 'lg',
				icon : 'icon-edit',
				title : '修改菜单',
				showFoot : false,
				uri : 'menu/edit?id=' + menuId
			});
		
		});
	
		// remove btn click
		$('#remove').on('click', function() {
			// get selected node
			var menuId = $('#menuId').val();
	
			if (menuId == '') {
				alert('请选择需要删除的菜单节点！');
				return;
			}
	
	
			var msg = '是否确认删除【选中的节点】？\n\n\
提示：\n\
该操作将会删除菜单下的所有子节点！\n\
请谨慎操作！';
	
			if (!window.confirm(msg))
				return;
	
			$.ajax({
				url : 'menu/delete',
				type : 'POST',
				data : {
					menuId : menuId
				},
				success : function(msg) {
					if (!msg) {
						alert('Unknown exception!');
					} else if (!msg.success) {
						alert("删除菜单节点失败！\n\n" + msg.msg);
					} else {
						alert("删除菜单节点成功！");
	
						loadTree();
	
						$('.delete-menu').addClass('hidden');
					}
				},
				error : function(a, b, c) {
					alert('Server error! ' + b);
				}
			});
		});
	});
</script>	
